<template>
<!-- 技术文档 -->
  <div class="produc">
    <div class="container">
      <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 suspension">
        <ul class="sticky-elements">
          <li class="sticky-nav-title">技术文档</li>
          <li @click="change(7)" :class="isActive == 7 ? 'atv' : ''">
            <span>热门问题</span>
          </li>
          <li @click="change(8)" :class="isActive == 8 ? 'atv' : ''">
            <span>更新日志</span>
          </li>
          <li @click="change(9)" :class="isActive == 9 ? 'atv' : ''">
            <span>说明文档</span>
          </li>
        </ul>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
        <div class="col-md-offset-1 search-for">
          <input type="text" placeholder="请输入搜索内容" v-model="search" />
          <span @click="searchs1()">搜索</span>
        </div>
        <div  v-if="technical.length>0">
            <div
              v-for="(item, i) in technical"
              :key="i"
              class="col-md-offset-1 dow-list"
            >
            
              <h2>{{ item.title }}</h2>
              <div class="infor-box">
            
                    <p class="infor" v-html="item.simpleTxt"></p>
                    <router-link target="_blank"  class="lookbut" :to="{path:'/details',query: {id: item.id}}">
                        查看详情
                   </router-link>
                  
                </div>
              
            </div>
          </div>
          <div  class="col-md-offset-1" v-if="technical.length<=0">暂无内容</div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../api/index";
export default {
  name: "download",
  data() {
    return {
      longing:false,
      technical: "",
      isActive: "",
      search: "",
    };
  },

  mounted() {
    document.body.addEventListener('keydown',this.searchs,false);
    this.change(7);
  },
  methods: {
    change(e) {
      api.querybytype({ type: e }).then((res) => {
       
        this.technical = res.data.data.list;
        this.isActive = e;
      });
    },
    change1(e) {
      this.$router.push({ path: "/details", query: { id: e } });
    },
    searchs() {
      var key = window.event.keyCode;
        if(key == 13 || key == 100){

              if(!this.longing && this.search!=''){
                this.longing=true
                api.contentsele({ type: this.isActive, title: this.search }).then((res) => {
                  this.longing=false
                  this.technical = res.data.data.list;
                });
            }

        }
    
      
    },
    searchs1() {
      if(!this.longing && this.search!=''){
                this.longing=true
                api.contentsele({ type: this.isActive, title: this.search }).then((res) => {
                  this.longing=false
                  this.technical = res.data.data.list;
                });
            }
      
    },
  },

   beforeDestroy(){

    document.body.removeEventListener('keydown',this.searchs,false);

  },
  destroyed(){

  document.body.removeEventListener('keydown',this.searchs,false);

  }
};
</script>

